extends ../layout

block head
  script(src='/js/lib/Chart.min.js')

block content
  .pb-2.mt-2.mb-4.border-bottom
    h2
      i.fas.fa-chart-bar.fa-sm(style='color: #FF6384').fa-sm
      | Chart.js and Alpha Vantage

  .btn-group.d-flex(role='group')
    a.btn.btn-primary(href='https://www.chartjs.org/docs', target='_blank').w-100
      i.fas.fa-chart-bar.fa-sm
      | Chart.js Docs
    a.btn.btn-primary(href='https://www.alphavantage.co/documentation', target='_blank').w-100
      i.fas.fa-money-check-alt.fa-sm
      | Alpha Vantage Docs
  .container
    .mt-2.mb-4
      h3 Chart.js — Line Chart Demo using data from Alpha Vantage
    | Alpha Vantage APIs are grouped into four categories: (1) Stock Time Series Data, (2) Physical and Digital/Crypto Currencies (e.g., Bitcoin), (3) Technical Indicators, and (4) Sector Performances. All APIs are realtime: the latest data points are derived from the current trading day.
    | ChartJS can render various chart types with different formatting.
    | This example plots the closing stock price of Microsoft for the last 100 days.
    .mt-2.mb-4
      div(style='width:90%; height:80%; margin: 0 auto;')
        canvas#chart
  script.
    var datesList = !{dates};
    var closingList = !{closing};
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: datesList,
    datasets: [{
    label: "Microsoft's Closing Stock Values",
    data: closingList,
    borderColor: "#3e95cd",
    backgroundColor: "rgba(118,152,255,0.4)"
    }]
    },
    options: {
    responsive:true,
    maintainAspectRatio: true,
    },
    });